<template>
	<!-- 申请退款 -->
	<view class="form-container">
		<nt-order-detail :orderInfo="commonForm.orderInfo"></nt-order-detail>
		<nt-card label="申请退款">
			<view class="form-item vertical">
				<view class="form-item__label">退款金额：</view>
				<view class="form-item__content">
					<u--input v-model="formData.money" placeholder="请输入金额"></u--input>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">退款内容：</view>
				<view class="form-item__content">
					<u--textarea v-model="formData.remarks" maxlength="-1" :confirmType="null"></u--textarea>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">上传图片：</view>
				<view class="form-item__content">
					<nt-upload @success="successUpload"></nt-upload>
				</view>
			</view>
			<nt-button text="提交" @tap="submit"></nt-button>
		</nt-card>
	</view>
</template>

<script>
import { applyRefund } from "@/api"
export default {
	data(){
		return {
			formData: {
				remarks: "",
				money: "",
				images: []
			},
			loading: false
		}
	},
	inject: ["commonForm"],
	methods: {
		successUpload(e){
			console.log(e,'图片上传')
			this.formData.images = e
		},
		submit(){
			const { remarks, money, images } = this.formData; 
			if(!money) return this.toast("请输入退款金额")
			if(!remarks) return this.toast("请填写退款内容")
			if(!images.length) return this.toast("请上传退款图片")
			if(this.loading) return
			applyRefund({
				realorder_id: this.commonForm.options.id,
				remarks,
				money,
				images: images.map(item => item.url)
			}).then(res => {
				const { code, data, msg } = res;
				if(code !== 1) return this.toast(msg)
				this.toast("退款申请成功")
				setTimeout(() => this.back(), 1000)
			}).finally(() => {
				this.loading = false
			})
		}
	}
}
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>